<template>
  <div class="nitovc">
    <div class="nitovc_list">
      <div class="tips"><img src="../assets/notice_icon.png"><span>网站公告:</span></div>
      <marquee class="marquee" scrollamount="10" onmouseover="this.stop()" onmouseleave="start()">
        <ul>
          <li v-for="(item,index) in lists" :key="index">{{item.context}}</li>
        </ul>
      </marquee>
    </div>

  </div>
</template>

<script>
export default {
 data () {
    return {
        lists:[],
    }
  },
  methods: {
      stop:function(){
        this.stop()
      },
      start:function(){
        this.start()
      },
      get_list(){
        this.$api.get('/api/home/notice', null, r => {
                  this.lists = r.data;
               })
      }
  },
  created() {
    this.get_list()
  }
}
</script>

<style scoped>
  .nitovc{
    color: #fff;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 1400px;
    width: 100%;
    padding: 10px 0;
    color: #939CAB;
  }
  .nitovc .nitovc_list{
    width: 1200px;
    height: 40px;
    border-radius: 29px;
    padding: 0 15px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0,0,0,.3);
  }
   .nitovc .nitovc_list .tips{
     display: flex;
     align-items: center;
     /* width: 100px; */
   }
   .nitovc .nitovc_list .tips img{
     width: 24px;
     height: 22px;
     margin-right: 15px;
   }
  .nitovc .nitovc_list .marquee{
    width: 1080px;
  }
  .nitovc .nitovc_list .marquee ul{
    display: flex;

  }
  .nitovc .nitovc_list .marquee ul li{
    font-size: 14px;
    color: #939CAB;
    opacity: .8;
    margin-right: 130px;
  }
</style>
